<template>
	<view class="page">
		<navHead :datas="headData"></navHead>
		<view class="heit pd-30">
			<view class="title ft fw-800">{{ "我的积分" }}</view>
			<view class="jfen mt-20 pd-20">
				<view class="flex-bwt">
					<view class="ft1">{{ '可使用积分' }}</view>
					<view class="ft c-9c">{{ '积分抵扣：' + integral_exchange_rule + '=1元人民币' }}</view>
				</view>
				<view class="ft-num">{{ can_use_integral_show }}</view>
			</view>
			<view class="card mt-20 pd-20">
				<view class="ft ft-28 fw-800">{{ '输入抵扣积分数量' }}</view>
				<view class="ft ft-22 mt-10 c-9c">{{ `单笔订单最多可使用${maxIntegral}积分` }}</view>
				<view class="flex mt-20">
					<view class="kind pd-20 flex-center ft c-66 mr-20" :class="{ active: selectedIndexes === index }"
						@click="selectKind(index)" v-for="(item, index) in kindList" :key="index">{{ item }}</view>
				</view>
				<view class="input flex pd-10 mt-20">
					<!-- <up-input placeholder="请输入" type="number" placeholderStyle="font-size: 28rpx;color: #D1D1D1;"
						border="none" clearable v-model="inputValue" pattern="[0-9]*"  @change="handleInput"></up-input> -->

					<input class="inputCom fs0" v-model="inputValue" placeholder=""
						placeholder-class="input-placeholder" @input="handleInput" @focus="isShowClose = true"
						@blur="isShowClose = false" />
					<image class="icon_midian img fs0" v-show="isShowClose" @tap.stop="closeInputValue"
						src="https://cdn.oss.bon-top.cn/static_bc/images/cancel_time.png">
					</image>

				</view>
				<view class="mt-20 flex-center ft ft-22 c-99">{{ '输入10000可抵扣￥1000元' }}</view>
			</view>
		</view>
		<view style="height: 166rpx;"></view>
		<view class="btn flex-center">
			<view class="submit flex-center ft act" @click="sub"> 提交</view>
		</view>
	</view>
</template>
<script setup lang="js">
import {
	onLoad
} from '@dcloudio/uni-app'
import {
	ref,
	reactive,
	onMounted,
	getCurrentInstance,
	nextTick
} from "vue";
import {
	utils
} from "@/utils/utils.js";
import {
	api
} from "@/utils/api.js";

import navHead from '@/components/navHead.vue';
const headData = reactive({
	color: '#fff',
	title: '积分抵扣使用'
})
const { proxy } = getCurrentInstance();
const kindList = ref([
	'全部', '1000', '5000', '10000'
])

const isShowClose = ref(false)
const handleInput = (e) => {
	nextTick(() => {
		inputValue.value = e.detail.value.replace(/[^0-9]/g, '')
		if (inputValue.value > maxIntegral.value) inputValue.value = maxIntegral.value
	})

}
const closeInputValue = () => {
	nextTick(() => {
		inputValue.value = ''
	})
}
const inputValue = ref("")
const maxIntegral = ref(50000)
const selectedIndexes = ref(-1)
const selectKind = (idx) => {
	if (kindList.value[idx] == '全部') {
		//现在最大只能使用50000
		inputValue.value = total_integral.value > maxIntegral.value ? maxIntegral.value : total_integral.value
	} else {
		inputValue.value = kindList.value[idx]
	}
	selectedIndexes.value = idx
}

const sub = () => {
	const eventChannel = proxy.getOpenerEventChannel();
	eventChannel.emit('fromDetail', {
		integral: inputValue.value
	});
	uni.navigateBack(-1)
}

const total_integral = ref(0)
const can_use_integral_show = ref("")
const integral_exchange_rule = ref("")
onLoad((options) => {
	const eventChannel = proxy.getOpenerEventChannel();
	// 接收数据
	eventChannel.on('toDetail', (data) => {
		total_integral.value = data.integral
		can_use_integral_show.value = data.can_use_integral_show
		integral_exchange_rule.value = data.integral_exchange_rule
	});

})
</script>

<style lang="scss" scoped>
.title {
	text-align: right;
}

.heit {
	// height: 1300rpx;
}

.jfen {
	width: 690rpx;
	height: 146rpx;
	background: linear-gradient(180deg, #FBFFDF 0%, #FFFFFF 100%);
	border-radius: 40rpx 40rpx 40rpx 40rpx;
}

.card {
	width: 690rpx;
	height: 346rpx;
	background: #F8F8F8;
	border-radius: 40rpx 40rpx 40rpx 40rpx;

	.kind {
		//width: 88rpx;
		height: 58rpx;

		background: #FFFFFF;
		border-radius: 34rpx 34rpx 34rpx 34rpx;
	}

	.active {
		background: #333333;
		color: #FFFFFF;
	}

	.input {
		width: 650rpx;
		height: 74rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;

		.inputCom {
			flex: 1;
		}

		.img {
			padding: 10rpx;
		}
	}

}

.btn {
	position: fixed;
	z-index: 99;
	bottom: 0;
	left: 0;
	background: #F8F8F8;
	width: 100%;
	padding-top: 10rpx;
	padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
	box-shadow: 0rpx -2rpx 2rpx 2rpx rgba(0, 0, 0, 0.05);

	.submit {
		width: 690rpx;
		height: 78rpx;
		background: #F1F1F1;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}

	.act {
		color: #DBF046;
		background: #333333;
	}
}
</style>